<template>
    <div class="visitor">
        <div class="top">
            <div class="left">
              <span class="free">
                  {{ user.isInsure === 1 ? '医保' : '自费' }}
              </span>
                <span class="username">
                  {{ user.name }}
              </span>
            </div>
            <div class="right">
                <el-button @click="handler" circle type="primary" size="default" :icon="Edit"/>
                <el-popconfirm @confirm="removeUser" width="200px" :title="`你确定要删除${user.name}?`">
                    <template #reference>
                        <el-button  v-if="$route.path=='/user/patient'" circle type="danger" size="default" :icon="Delete"/>
                    </template>
                </el-popconfirm>
            </div>
        </div>
        <div class="bottom">
            <p>证件类型:{{ user.param.certificatesTypeString }}</p>
            <p>证件号码:{{ user.certificatesNo }}</p>
            <p>用户性别:{{ user.sex == 0 ? '女生' : '男生' }}</p>
            <p>出生日期:{{ user.birthdate }}</p>
            <p>手机号码:{{ user.phone }}</p>
            <p>婚姻状况:{{ user.isMary == 0 ? '未婚' : '已婚' }}</p>
            <p>当前住址:{{ user.param.cityString }}</p>
            <p>详细地址:{{ user.param.fullAddress }}</p>
            <!--          已选择的效果-->
            <transition name="confirm">
                <div class="confirm" v-if="index==currentIndex">已选择</div>
            </transition>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Edit, Delete} from "@element-plus/icons-vue";
import {useRouter, useRoute} from "vue-router";
import {reqDeleteUser} from "@/api/user";
import {ElMessage} from "element-plus";
//接受父组件传递过来的就诊人信息进行展示
let props = defineProps(['user', 'currentIndex', 'index'])
let $emit = defineEmits(['changeScene','removeUser'])
let $router = useRouter()
let $route = useRoute()
//相应就诊人组件修改按钮的回调
const handler = () => {
    //要么是就诊人管理模块跳转的，要么就是预约挂号点击跳转的
    if ($route.path == '/user/patient') {
        //就诊人管理
        $emit('changeScene', props.user)
    } else {
        //预约挂号
        //路由跳转携带参数
        $router.push({
            path: '/user/patient', query: {
                type: 'edit',
                id: props.user.id
            }
        })
    }


}

//删除某个用户
const removeUser = async ()=>{
    try{
        await reqDeleteUser(props.user.id)
        ElMessage({
            type:'success',
            message:'删除成功！'
        })
    }catch (error){
        ElMessage({
            type:'error',
            message:error.message
        })
        //通知父组件重写获取用户数据
        $emit('removeUser')
    }
}
</script>


<style scoped lang="scss">
.visitor {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);

  .top {
    height: 60px;
    background-color: #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      margin-left: 10px;
      text-align: center;
      justify-content: center;
      align-items: center;

      .free {
        background: white;
        font-size: 12px;
        border-radius: 10px;
      }

      .username {
        color: #7f7f7f;
      }
    }
  }

  .bottom {
    padding-left: 15px;
    position: relative;

    p {
      line-height: 30px;
    }

    .confirm {
      position: absolute;
      width: 200px;
      height: 200px;
      color: red;
      border-radius: 50%;
      border: 1px dashed red;
      text-align: center;
      line-height: 200px;
      left: 20%;
      top: 20%;
      opacity: 0.5;
      transform: rotate(35deg);
      font-weight: 600;
    }

    .confirm-enter-from {
      transform: scale(1);
    }

    .confirm-enter-to {
      transform: scale(1.2);

    }

    .confirm-enter-active {
      transition: all 0.15s;
    }
  }
}
</style>